/**
 * Created by 小敏哥 on 2017/8/25.
 */
import React, {Component} from 'react';
import {connect} from 'react-redux';
import style from './index.scss';
import {getUploadResult,uploadResult}  from '../../actions/uploadResultAction';
import AlipayJSOperation from '../../utils/alipayJSOperation';
import {setRequirementStatus} from '../../actions/taxConfirmAction'
import ReModal from '../../components/common/reModal';
import PageBar from '../../components/common/pageBar';
import SendCxytjMessage from '../../utils/sendCxytjMessage'

class UploadResult extends Component {

    constructor(props) {
        super(props);
        this.state={
            title:'资料审核',
            requirementType:'',
            confirmType:1,
        };
        this.source = {
            JQX: {
                docName:'交强险',
                title: '交强险审核',
                eventId:'H5_P_Interspection_EnterInsuranceReviewpage',
                confirmStatus:5,
                cancelStatus:6,
                confirmText:'在有效期内',
                cancelText:'已过期',
            }
            ,
            CCS: {
                docName:'车船税',
                title: '车船税审核',
                eventId:'H5_P_Interspection_EnterTaxReviewpage',
                confirmStatus:5,
                cancelStatus:6,
                confirmText:'有效期内',
                cancelText:'已过期',
            }
            ,
            XSZ: {
                docName:'行驶证正副本',
                title: '行驶证正副本审核',
                eventId:'H5_P_Interspection_EnterLicenseReviewpage',
                confirmStatus:7,
                cancelStatus:8,
                confirmText:'已备好',
                cancelText:'未准备',
            }
            ,
            SFZ: {
                docName:'身份证正反面',
                title: '身份证正反面审核',
                eventId:'H5_P_Interspection_EnterIDReviewpage',
                confirmStatus:7,
                cancelStatus:8,
                confirmText:'已备好',
                cancelText:'未准备',
            }
            ,
            SCSFZ: {
                title: '车主手持身份证照片审核',
                eventId:'H5_P_Interspection_EnterIDPictureReviewpage',
                confirmStatus:7,
                cancelStatus:8,
                confirmText:'已备好',
                cancelText:'未准备',
            }
            ,
            CLDJZ: {
                docName:'车辆登记证',
                title: '车辆登记证审核',
                eventId:'H5_P_Interspection_EnterIDReviewpage',
                confirmStatus:7,
                cancelStatus:8,
                confirmText:'已备好',
                cancelText:'未准备',
            }
        };
    }

    init() {
        this.props.dispatch(getUploadResult({id: this.props.params.documentId},(data)=>{
            let title=this.source[data.requirementType].title;

            this.setState({
                title:title,
                requirementType:data.requirementType,
                confirmType:data.confirmType,
            });
            AlipayJSOperation.setTitle(title);
            document.querySelector("title").innerHTML = title;
            //发送埋点
            SendCxytjMessage.sendMessage({
                eventId: this.source[data.requirementType].eventId,
                attr1: data.requirementType//属性1
            });
        }));
    }

    componentDidMount() {
        AlipayJSOperation.setRightButtonStatus(false);
        // this.init();
    }

    componentWillUnmount(){
        //退出前清除全局缓存，防止下次进入页面时读取到缓存的数据
        this.props.dispatch(uploadResult({}));
    }

    getLittleTitle() {
        switch (this.props.uploadResult.status) {
            case 2:
                return <div className={style.title}><img src="./images/uploadPage/doing.png"/><span>审核中</span>
                </div>;
            case 3:
                return <div className={style.title}><img src="./images/uploadPage/success.png"/><span>审核通过</span>
                </div>;
            case 4:
                return <div className={style.title}><img src="./images/uploadPage/fail.png"/><span>审核失败</span>
                </div>;
        }
    }

    //用户点击按钮手动设置资料状态
    setStatus(status) {
        this.props.dispatch(setRequirementStatus({
            id: this.props.params.documentId,
            status: status,
        }, () => {
            window.history.back();
        }));
    }

    //跳转到资料上传页面
    goToUpload(){
        ReModal.confirm("重新上传后当前审核中图片将被删除，确定重新上传？",()=>{
            this.context.router.push(`/uploadPage/${this.props.uploadResult.requirementType}/${this.props.params.documentId}/2`);
        })
    }

    //用户自行确认
    userConfirm(){
        let {docName,confirmText}=this.source[this.state.requirementType];
        ReModal.confirm(`是否确认您的${docName+confirmText}`,()=>{
            this.setStatus(this.source[this.state.requirementType].confirmStatus);
        })
    }

    userCancel(){
        let {docName,cancelText}=this.source[this.state.requirementType];
        ReModal.confirm(`是否确认您的${docName+cancelText}`,()=>{
            this.setStatus(this.source[this.state.requirementType].cancelStatus);
        })
    }

    render() {
        let {remark, imgUrl, imgSecUrl, status}=this.props.uploadResult;
        console.log(imgUrl);
        return <div className={style.container}>
            <PageBar title={this.state.title}/>
            <div className={style.header}>
                <div>
                    {this.getLittleTitle()}
                    <p className={style.remark}>{remark}</p>
                </div>
            </div>
            <div className={style.content}>
                <div className={style.imgContainer}>
                    {imgUrl ? <div>
                            <img src={imgUrl}/>
                            {status != 3?<button onClick={this.goToUpload.bind(this)}><img src="./images/uploadPage/reUpload.png"/></button>:""}
                        </div> : ''}
                    {imgSecUrl ? <div>
                            <img src={imgSecUrl}/>
                            {status != 3?<button onClick={this.goToUpload.bind(this)}><img src="./images/uploadPage/reUpload.png"/></button>:""}
                        </div> : ''}
                </div>
            </div>


            {status != 3&&this.state.confirmType != 1 ? <div className={style.bottom}>
                    <p>如您已确认该资料是否符合办理要求，可直接跳过客服审核，确认资料状态后进入下一步年检办理手续。</p>
                    <div className={style.buttonContainer}>
                        <button onClick={() => {
                           this.userCancel();
                        }}>{this.state.requirementType!=''?this.source[this.state.requirementType].cancelText:''}</button>
                        <button onClick={() => {
                            this.userConfirm();
                        }}>{this.state.requirementType!=''?this.source[this.state.requirementType].confirmText:''}</button>
                    </div>
                </div> : ''}
        </div>
    }
}

function mapStateToProps(state) {
    return Object.assign({}, state.uploadResult);
}

UploadResult.contextTypes = {
    router: React.PropTypes.object.isRequired
};

export default connect(mapStateToProps)(UploadResult)